<template>
    <div class="user_evaluate_wp">
        <div class="nav_bar_title">
            <span>博富财经-用户满意度调查</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-userevaluate')"></i>
        </div>
        <div class="da_fen">
            <div>
                <span>给软件打分</span>
                <el-rate allow-half v-model="score" />
                <span>最高分为5分</span>
            </div>
            <div class="btns">
                <span>当前版本</span>
                <span>所有版本</span>
            </div>
        </div>
        <div class="content">
            <textarea v-model="content" rows="3" maxlength="300" placeholder="请填写评价内容"></textarea>
        </div>
        <div class="da_fen comment">
            <div>
                <span>字数限制：</span>
                <span>不超过300个</span>
                <span class="remark">注：评论不支持回复，有问题请到</span>
                <!-- <span class="kefu" @click="openKeFu">在线客服</span> -->
            </div>
            <div class="btns">
                <span @click="CommentTap">发表评论</span>
            </div>
        </div>
        <div class="introduce">
            当前版本({{ config.version }})的平均评分：
            <el-rate v-model="fraction" allow-half disabled />
            （5次评分）已有0条用户评价
        </div>
        <div class="evaluate_list">
            <div class="list_item" v-for="item in comments_list" :key="item.id">
                <div class="title">
                    <span>{{ item.id }}</span>
                    {{ item.content }}
                </div>
                <div class="user_information">
                    评论人：******号用户 BF-版本{{ config.version }}-{{ item.time }} (<span>{{ item.score }}分</span>)
                </div>
            </div>
            <div class="empty" v-if="comments_list.length <= 0">暂无评价</div>
            <div class="list_bar">
                <div v-if="comments_list.length > 0">
                    <span>首页</span>
                    <span>上一页</span>
                    <span>下一页</span>
                    <span>当前1页</span>
                    <span>共1页</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const {  ipcRenderer } = require('electron');
const config = ref(require('../../../package.json'))
import moment from 'moment'



const fraction = ref(4.5)
const content = ref('')
const score = ref(0)
const comments_list = ref(localStorage.getItem('comments_list') ? JSON.parse(localStorage.getItem('comments_list')) : [])

// function openKeFu() {
//     shell.openExternal('https://help.wenhua.com.cn/index.asp');
// }
function CommentTap() {
    if (!content.value || !score.value) {
        return
    }
    comments_list.value.unshift({
        id: String(new Date() / 1).slice(-5),
        content: content.value,
        time: moment(new Date).format('YYYY/MM/DD HH:mm:ss'),
        score: score.value
    })
    content.value = ''
    score.value = ''
    localStorage.setItem('comments_list', JSON.stringify(comments_list.value))
}
</script>

<style scoped lang="less">
.user_evaluate_wp {
    background-color: #ffffff;
    color: #05568e;
    height: 470px;
    width: 670px;

    .nav_bar_title {
        -webkit-app-region: drag;
        background-color: #307dc1;
        line-height: 30px;
        color: #fff;
        padding-left: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        i {
            -webkit-app-region: no-drag;
            width: 30px;
            height: 30px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
        }
    }

    .da_fen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;

        >div {
            display: flex;
            align-items: center;
        }

        .btns {
            span {
                background-color: #3e92d6;
                color: #fff;
                margin-left: 10px;
                line-height: 23px;
                width: 77px;
                text-align: center;
            }
        }

        .remark {
            color: #e02b2a;
            margin-left: 20px;
        }

        .kefu {
            text-decoration: underline;
            margin-left: 3px;
        }
    }

    .content {
        padding: 0 10px;

        textarea {
            font-size: 12px;
            width: 100%;
            line-height: 18px;
            padding: 5px;
        }
    }

    .comment {
        margin: 0 10px 10px 10px;
        padding: 10px 0;
        border-bottom: 1px solid #dadadd;
    }

    .introduce {
        background-color: #9eb9d4;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-weight: bold;
        color: #fff;
        margin: 0 10px;
    }

    .evaluate_list {
        padding: 0 10px 20px 10px;

        .list_item {
            color: #000;
            background-color: #e6eff6;
            margin-bottom: 5px;
            padding: 5px 0;

            .title {
                margin-bottom: 5px;

                span {
                    margin: 0 5px;
                }
            }

            .user_information {
                color: #a9a9bd;
                margin-left: 20px;

                span {
                    color: #e2ab45;
                }
            }
        }

        .empty {
            color: #000;
        }

        .list_bar {
            background-color: #9eb9d4;
            height: 25px;

            div {
                color: #fff;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 25px;

                span {
                    margin-right: 5px;
                    letter-spacing: 1px;
                }
            }
        }
    }
}
</style>
